import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 全局注册Article组件
import Article from './components/Article.vue';
Vue.component('Article', Article)

// 全局的自定义指令，一定要放到 new Vue 之前
// Vue.directive('指令名称(不要包含v-)', { 配置项 });
// Vue.directive('color', {
//   // bind函数的名字，是固定的。Vue内置的，不能改
//   // bind函数，在第一次解析标签的时候，会执行（就执行这么一次）
//   // bind函数的第一个参数 el 表示使用指令的元素
//   bind(el, obj) {
//     // console.log(obj);
//     // obj.value 它就是传递给指令的值
//     el.style.color = obj.value;
//     console.log('bind执行了')
//   },
//   // update ,组件在更新的时候，会重新解析自定义指令，此时会触发update函数
//   update(el, obj) {
//     el.style.color = obj.value;
//     console.log('update执行了')
//   }
// })

// 简化条件：如果bind和update函数的业务逻辑完全一致，可以简化代码
Vue.directive('color', (el, obj) => {
  el.style.color = obj.value;
})

new Vue({
  render: h => h(App),
}).$mount('#app')
